<style scoped>
@import url(../../style/page/index.css);
</style>
<template>
  <div class="mian">
    <div class="head_box">    
                   <span class="back_box" @click="urlClcik(url)">&lt;返回</span>
                    <span class="head_title">首页 </span>
                    <span class="head_title">&gt;民生保障</span>
                    <span class="head_title">&gt;劳有所得</span>
                    <span class="head_text">&gt;推动更加充分更高质量就业</span>
                    <span class="head_text_icon">预警</span>
                    <span class="head_stjy">牵头单位：省人力社保厅</span>
                    <div class="ndmb_box" v-if="showtabNd"><div class="ndmb_title">年度目标</div><div class="ndmb_right_box">建设公共就业服务平台，鼓励支持多渠道灵活就业，重点做好高校毕业生、退役军人、残疾人等群体就业工作，确保零就业家庭动态清零。</div></div>
                    <span class="head_cenetr_box" :class="[showtabNd?'jt_icon_top':'jt_icon']" @click="clickndmb()">年度目标<span class="head_center_icon_box"></span></span>
      </div>
    <!-- <div class="head_box">
      <span class="head_title">民生保障</span>
      <span class="head_title">&gt;劳有所得</span>
      <span class="head_text">&gt;推动更加充分更高质量就业 </span>
      <span class="head_stjy">牵头单位：省人力社保厅</span>
    </div> -->
    <div class="center_box">
      <div class="center_left_box">
        <div class="box_con" v-for="(item, i) in leftDatas" :key="i">
          <div class="box_title">
            <div class="left_title">{{ item.leftTitle }}</div>
            <div class="right_title">{{ item.rightTitle }}</div>
          </div>
          <div v-for="(Jitem, j) in item.children" :key="j">
            <div
              class="left_img_box"
              :class="[
                { active: tabIndex == Jitem.icon },
                { afterIcon: tabIndex == Jitem.icon },
                Jitem.icon,
              ]"
              @click="tabClick(Jitem)"
            >
              <div class="img_title">{{ Jitem.imgTitle }}</div>
              <div class="img_nums">
                <span class="num"
                  >{{ Jitem.value
                  }}<i class="unit">{{ Jitem.valueUnit }}</i></span
                ><span class="total"
                  ><i class="xg">/</i>{{ Jitem.total
                  }}<i class="unit">{{ Jitem.totalUnit }}</i></span
                ><span class="unit">{{ Jitem.unit }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="center_right_box">
        <div class="czxzjyrs_box" v-if="dcsylShow">
          <div class="center_right_top_box">
            <div class="chart_box">
              <div class="title_box">{{ boxTitle }}（按时间进度）</div>
              <div class="echart_box">
                <div class="pei_box">
                  <avue-echart-PercentCircle
                    :data="peiDatas.value"
                    :radius="['75%', '85%']"
                  ></avue-echart-PercentCircle>
                </div>
                <div class="line_box">
                  <avue-echart-bars
                    :data="topBarDatas"
                    :option="cxszDatas.option"
                    :unit="unit"
                    width="100%"
                    height="100%"
                  ></avue-echart-bars>
                </div>
              </div>
            </div>
          </div>
          <div class="center_right_bottom_box">
            <div class="chart_box">
              <div class="title_box">{{ boxTitle }}（分地区）</div>
              <div class="echart_box">
                <avue-echart-bars
                  :data="bottomBarData"
                  :option="barDatas.option"
                  :unit="unit"
                  width="100%"
                  height="100%"
                ></avue-echart-bars>
              </div>
            </div>
          </div>
        </div>
        <div class="dcsyl_box" v-if="!dcsylShow">
          <div class="chart_box">
            <div class="title_box">{{ boxTitle }}</div>
            <div class="echart_box">
              <avue-echart-bars
                :data="dcsyDatas.data"
                :option="dcsyDatas.option"
                 :unit="unitSydc"
                width="100%"
                height="100%"
              ></avue-echart-bars>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { adaptePX } from "@/lib/common";
export default {
  name: "main_index",
  data() {
    return {
      url:"https://dgov-integrate-task-test.zj.gov.cn:90/msbz/msbz/",
      showtabNd:true,
      unitSydc:"单位:%",
      unit:"单位:万人",
      boxTitle: "城镇新增就业人数",
      peiDatas: {
        value: 90,
      },
      topBarDatas: {
        categories: ["202101", "202102", "202103", "202104", "202105"],
        series: [
          {
            name: "2021年",
            data: [8.12, 17.18, 31.45, 45.86, 57.98],
          },
        ],
      },
      bottomBarData: {
        categories: [
          "杭州",
          "宁波",
          "温州",
          "湖州",
          "嘉兴",
          "绍兴",
          "金华",
          "衢州",
          "舟山",
          "台州",
          "丽水",
        ],
        series: [
          {
            name: "完成数",
            data: [
              7.96, 7.39, 4.46, 4.35, 4.75, 5.37, 4.62, 1.49, 0.8, 3.73, 0.93,
            ],
          },
          {
            name: "目标数",
            data: [17.0, 13.0, 8.0, 6.0, 8.0, 8.0, 8.0, 2.0, 1.0, 8.0, 1.0],
          },
        ],
      },
      dcsyDatas: {
        option: {
          type: ["line"],
          gridTop: 10,
          gridRight: "0",
          gridLeft: "10",
          gridBottom: "0",
          //legend
          legend: true,
          legendPositionTop: "top",
          legendPositionLeft: "center",
          legendColor: "#333333",
          legendFontSize: 12,
          //title
          istl: false,
          //x
          xNameColor: "#303030",
          xAxisLineShow: true,
          xaxisLineColor: "#AEAEAE",
          xAxisRotate: "40",
          xNameFontSize: adaptePX(14),
          xAxisName: " ",
          xAxisTickShow: false,
          //y
          yName:"单位：%",
          yNameFontSize: 12,
          yNameColor: "#303030",
          yLabelFontSize: adaptePX(14),
          yLabelColor: "#303030",
          yaxisLineColor: "rgb(255,255,255)",
          yAxisLine: false,
          yAxisSplitLineShow: true,
          yAxisSplitLineColor: "#AEAEAE",
          yAxisSplitLineType: "dashed",
          // series
          barWidth: 16,
          barRadius: "0",
          seriesLableShow: false,
          seriesLableFontSize: 12,
          seriesLableColor: "#000",
          barColor: [
            {
              color1: "#F9941D",
              $index: 0,
            },
          ],
        },
        data: {
          categories: [
            "2019年一季度",
            "2019年二季度",
            "2019年三季度",
            "2019年四季度",
            "2020年一季度",
            "2020年二季度",
            "2020年三季度",
            "2020年四季度",
            "2021年一季度",
          ],
          series: [
            {
              name: "季度",
              data: [4.3, 4.2, 4.4, 4.3, 4.7, 4.9, 4.7, 4.3, 4.4],
            },
          ],
        },
      },
      cxszDatas: {
        option: {
          type: ["line"],
          gridTop: 18,
          gridRight: "0",
          gridLeft: "0",
          gridBottom: "0",
          //legend
          legend: true,
          legendPositionTop: "top",
          legendPositionLeft: "center",
          legendColor: "#333333",
          legendFontSize: 12,
          //title
          istl: false,
          //x
          xNameColor: "#303030",
          xAxisLineShow: true,
          xaxisLineColor: "#AEAEAE",
          xAxisRotate: " ",
          xNameFontSize: adaptePX(14),
          xAxisName: " ",
          xAxisTickShow: false,
          //y
          yName: "单位：万人",
          yNameFontSize: 12,
          yNameColor: "#303030",
          yLabelFontSize: adaptePX(14),
          yLabelColor: "#303030",
          yaxisLineColor: "rgb(255,255,255)",
          yAxisLine: false,
          yAxisSplitLineShow: true,
          yAxisSplitLineColor: "#AEAEAE",
          yAxisSplitLineType: "dashed",
          // series
          barWidth: 16,
          barRadius: "0",
          seriesLableShow: false,
          seriesLableFontSize: 12,
          seriesLableColor: "#000",
          barColor: [
            {
              color1: "#2380FF",
              $index: 0,
            },
          ],
        },
      },
      barDatas: {
        option: {
          type: ["bar", "line"],
          gridTop: 18,
          gridRight: "0",
          gridLeft: "0",
          gridBottom: "0",
          //legend
          legend: true,
          legendPositionTop: "top",
          legendPositionLeft: "center",
          legendColor: "#333333",
          legendFontSize: 12,
          //title
          istl: false,
          //x
          xNameColor: "#303030",
          xAxisLineShow: true,
          xaxisLineColor: "#AEAEAE",
          xAxisRotate: " ",
          xNameFontSize: adaptePX(14),
          xAxisName: " ",
          xAxisTickShow: false,
          //y
          yName: "单位：万人",
          yNameFontSize: 12,
          yNameColor: "#303030",
          yLabelFontSize: adaptePX(14),
          yLabelColor: "#303030",
          yaxisLineColor: "rgb(255,255,255)",
          yAxisLine: false,
          yAxisSplitLineShow: true,
          yAxisSplitLineColor: "#AEAEAE",
          yAxisSplitLineType: "dashed",
          // series
          barWidth: 16,
          barRadius: "0",
          seriesLableShow: false,
          seriesLableFontSize: 12,
          seriesLableColor: "#000",
          barColor: [
            {
              color1: "#2380FF",
              $index: 0,
            },
            {
              color1: "#F9941D",
              $index: 1,
            },
          ],
        },
      },
      dcsylShow: true,
      tabIndex: "img_icon1",
      leftDatas: [
        {
          leftTitle: "确保就业局势总体稳定",
          rightTitle: "省人力社保厅",
          children: [
            {
              icon: "img_icon1",
              imgTitle: "城镇新增就业人数",
              value:57.98,
              valueUnit:"",
              total:80,
              totalUnit: "",
              unit: "万人",
              barDatas: {
                peiDatas: {
                  value: 90,
                },
                topBarDatas: {
                  categories: [
                    "202101",
                    "202102",
                    "202103",
                    "202104",
                    "202105",
                  ],
                  series: [
                    {
                      name: "2021年",
                      data: [8.12, 17.18, 31.45, 45.86, 57.98],
                    },
                  ],
                },
                bottomBarData: {
                  categories: [
                    "杭州",
                    "宁波",
                    "温州",
                    "湖州",
                    "嘉兴",
                    "绍兴",
                    "金华",
                    "衢州",
                    "舟山",
                    "台州",
                    "丽水",
                  ],
                  series: [
                    {
                      name: "完成数",
                      data: [
                        7.96, 7.39, 4.46, 4.35, 4.75, 5.37, 4.62, 1.49, 0.8,
                        3.73, 0.93,
                      ],
                    },
                    {
                      name: "目标数",
                      data: [
                        17.0, 13.0, 8.0, 6.0, 8.0, 8.0, 8.0, 2.0, 1.0, 8.0, 1.0,
                      ],
                    },
                  ],
                },
              },
            },
            {
              icon: "img_icon2",
              imgTitle: "调查失业率",
              value: 4.4,
              valueUnit: "%",
              total: 5.5,
              totalUnit: "%",
              unit: "左右",
            },
          ],
        },
        {
          leftTitle: "做好高校毕业生就业工作",
          rightTitle: "省人力社保厅",
          children: [
            {
              icon: "img_icon3",
              imgTitle: "就业见习人数",
              value:1,
              valueUnit: "",
              total:1.5,
              totalUnit: "",
              unit: "万人",
              barDatas: {
                peiDatas: {
                  value: 66.80,
                },
                topBarDatas: {
                 categories: [ "202101", "202102", "202103", "202104", "202105", ],
                  series: [
                    {
                      name: "2021年",
                      data: [2766,1880,1954,2035,1385],
                    },
                  ],
                },
                bottomBarData: {
                  categories: ["杭州","宁波","温州","湖州","嘉兴","绍兴","金华","衢州","舟山","台州","丽水", ],
                  series: [
                     {
                      name: "完成数",
                      data: [3061, 1313,371, 1002, 725,659, 535, 265,57, 509, 138],
                    },
                    {
                      name: "目标数",
                      data: [7350,3700, 800,580, 580, 580, 700, 120, 120, 350, 120],
                    },
                  ],
                },
              }
            },
          ],
        },
        {
          leftTitle: "做好就业困难人员就业工作",
          rightTitle: "省人力社保厅",
          children: [
            {
              icon: "img_icon4",
              imgTitle: "困难人员实现就业人数",
              value:4.71,
              valueUnit: "",
              total:7,
              totalUnit: "",
              unit: "万人",
              barDatas: {
                peiDatas: {
                  value: 86.27,
                },
                topBarDatas: {
                 categories: [ "202101", "202102", "202103", "202104", "202105", ],
                  series: [
                    {
                      name: "2021年",
                      data: [1.04, 1.84, 3.27, 4.71, 6.04],
                    },
                  ],
                },
                bottomBarData: {
                  categories: ["杭州","宁波","温州","湖州","嘉兴","绍兴","金华","衢州","舟山","台州","丽水", ],
                  series: [
                     {
                      name: "完成数",
                      data: [0.78, 0.45,0.17, 0.18, 0.48, 1.95, 0.30, 0.14, 0.07, 0.12, 0.06],
                    },
                    {
                      name: "目标数",
                      data: [1.80, 1.25, 0.40,0.4,0.85,0.95,0.5,0.25,0.13,0.35,0.12],
                    },
                  ],
                },
              }
            },
          ],
        },
        {
          leftTitle: "做好残疾人就业工作",
          rightTitle: "省残联",
          children: [
            {
              icon: "img_icon5",
              imgTitle: "全年残疾人培训人次",
              value:0.44,
              valueUnit: "",
              total:1.02,
              totalUnit: "",
              unit: "万人",
              pageUrl:
                " https://dgov-integrate-task-test.zj.gov.cn/msbz/cjrjy/#/?type=2",
            },
            {
              icon: "img_icon6",
              imgTitle: "新增残疾人就业人数",
              value: 0.61,
              valueUnit: "",
              total:2.02,
              totalUnit: "",
              unit: "万人",
              pageUrl:
                " https://dgov-integrate-task-test.zj.gov.cn/msbz/cjrjy/#/?type=1",
            },
          ],
        },
        {
          leftTitle: "做好退役军人就业工作",
          rightTitle: "省退役军人事务厅",
          children: [
            {
              icon: "img_icon7",
              imgTitle: "到地方就业退役军人适应性培训参训率",
              value:82.66,
              valueUnit: "",
              total:90,
              totalUnit: "",
              unit: "%",
              pageUrl:
                " https://dgov-integrate-task.zj.gov.cn/msbz/cjjygzlfz/#/",
            },
          ],
        },
      ],
    };
  },
  methods: {
    init() {},
    tabClick(item) {
      var this_=this;
      this.boxTitle = item.imgTitle || "";
      this.tabIndex = item.icon;
      var url = item.pageUrl;
      if (url) {
        window.location.href = url;
      } else {
        var icon = item.icon;
        if (icon == "img_icon2") {
          this.dcsylShow = false;
        } else {
          this.dcsylShow = true;
          this.topBarDatas=item.barDatas.topBarDatas
          this.bottomBarData=item.barDatas.bottomBarData
          this.peiDatas=item.barDatas.peiDatas
           if(item.icon=="img_icon3"){
              this_.unit="单位:万人"
             }
        }
       
      }
    },
    getPhbDatas() {
      axios({
        url: "/public/JSON/data.json",
        methods: "post",
        params: {},
      }).then((res) => {});
    },
    clickndmb(){
       this.showtabNd=!this.showtabNd;
    },
     urlClcik(url){
      if(url){
        window.location.href=url;
      }
    },
  },
  // created() {
  //   this.init();
  // },
  mounted() {
    this.init();
  },
};
</script>